Performance Timeline: Metriklarni Yig'ish Bo'yicha To'liq Qo'llanma

Bugungi tezkor raqamli dunyoda veb-sayt unumdorligi juda muhim. Foydalanuvchilar veb-saytlarning tez yuklanishini va darhol javob berishini kutishadi. Sekin ishlaydigan veb-sayt hafsalani pir qilishi, seanslarning tark etilishiga va oxir-oqibat, daromadning yo'qolishiga olib kelishi mumkin. Yaxshiyamki, zamonaviy veb-brauzerlar veb-sayt unumdorligini o'lchash va tahlil qilish uchun kuchli vositalarni taqdim etadi. Ushbu vositalarning eng qimmatlilaridan biri bu Performance Timeline API dir.

Ushbu to'liq qo'llanma Performance Timeline API ni batafsil o'rganib chiqadi, uning asosiy tushunchalaridan tortib, unumdorlik metrikalarini yig'ish va tahlil qilish bo'yicha ilg'or usullargacha bo'lgan barcha narsalarni qamrab oladi. Biz turli xil unumdorlik yozuvlari turlarini ko'rib chiqamiz, API dan samarali foydalanishni namoyish etamiz va veb-saytingiz unumdorligini optimallashtirishga yordam beradigan amaliy misollar keltiramiz.

Performance Timeline API nima?

Performance Timeline API - bu brauzer tomonidan to'plangan unumdorlikka oid ma'lumotlarga kirishni ta'minlovchi JavaScript interfeyslari to'plamidir. Bu dasturchilarga veb-sayt unumdorligining turli jihatlarini o'lchash imkonini beradi, masalan:

• Sahifani yuklash vaqti
• Resurslarni yuklash vaqti (rasmlar, skriptlar, uslublar jadvallari)
• Foydalanuvchi vaqtini o'lchash
• Kadr tezligi va renderlash unumdorligi
• Xotiradan foydalanish

Ushbu ma'lumotlarni yig'ish va tahlil qilish orqali dasturchilar unumdorlikdagi zaif nuqtalarni aniqlashlari va foydalanuvchi tajribasini yaxshilash uchun optimallashtirishlarni amalga oshirishlari mumkin. API unumdorlik ma'lumotlariga kirishning standartlashtirilgan usulini taqdim etadi, bu esa brauzerlararo unumdorlikni kuzatish vositalarini yaratishni osonlashtiradi.

Asosiy tushunchalar va interfeyslar

Performance Timeline API bir nechta asosiy tushunchalar va interfeyslar atrofida qurilgan:

• Performance Timeline: Veb-sahifaning hayoti davomida sodir bo'lgan unumdorlik hodisalari xronologiyasini ifodalaydi. Bu unumdorlik ma'lumotlariga kirish uchun markaziy nuqtadir.
• Performance Entry: Bitta unumdorlik hodisasini, masalan, resursni yuklash hodisasi yoki foydalanuvchi tomonidan belgilangan vaqt o'lchovini ifodalaydi.
• Performance Observer: Dasturchilarga yangi unumdorlik yozuvlari uchun Performance Timeline-ni kuzatish va ularga real vaqt rejimida javob berish imkonini beradi.
• `performance` obyekti: Performance Timeline va unga bog'liq usullarga kirishni ta'minlovchi global obyekt (`window.performance`).

`performance` Obyekti

`performance` obyekti Performance Timeline API bilan ishlashning boshlang'ich nuqtasidir. U unumdorlik yozuvlarini olish, xronologiyani tozalash va unumdorlik kuzatuvchilarini yaratish uchun usullarni taqdim etadi. Eng ko'p ishlatiladigan usullardan ba'zilari quyidagilardir:

• `performance.getEntries()`: Xronologiyadagi barcha unumdorlik yozuvlari massivini qaytaradi.
• `performance.getEntriesByName(name, entryType)`: Muayyan nom va yozuv turiga ega bo'lgan unumdorlik yozuvlari massivini qaytaradi.
• `performance.getEntriesByType(entryType)`: Muayyan turdagi unumdorlik yozuvlari massivini qaytaradi.
• `performance.clearMarks(markName)`: Muayyan nomdagi unumdorlik belgilarini tozalaydi.
• `performance.clearMeasures(measureName)`: Muayyan nomdagi unumdorlik o'lchovlarini tozalaydi.
• `performance.now()`: Navigatsiya boshlanganidan beri o'tgan vaqtni ifodalovchi yuqori aniqlikdagi vaqt belgisini, odatda millisekundlarda qaytaradi. Bu davomiylikni o'lchash uchun juda muhimdir.

Unumdorlik Yozuvlari Turlari

Performance Timeline API bir nechta turli xil unumdorlik yozuvlarini belgilaydi, ularning har biri ma'lum bir unumdorlik hodisasini ifodalaydi. Eng muhim yozuv turlaridan ba'zilari quyidagilardir:

• `navigation`: Sahifani yuklash uchun navigatsiya vaqtini, shu jumladan DNS qidiruvi, TCP ulanishi, so'rov va javob vaqtlarini ifodalaydi.
• `resource`: Muayyan resursni, masalan, rasm, skript yoki uslublar jadvalini yuklashni ifodalaydi.
• `mark`: Xronologiyada foydalanuvchi tomonidan belgilangan vaqt belgisini ifodalaydi.
• `measure`: Xronologiyada foydalanuvchi tomonidan belgilangan va ikkita belgi o'rtasida hisoblangan davomiylikni ifodalaydi.
• `paint`: Brauzerning ekranda birinchi tarkibni (First Paint) va birinchi mazmunli tarkibni (First Contentful Paint) chizish uchun ketgan vaqtni ifodalaydi.
• `longtask`: Asosiy oqimni uzoq vaqt davomida (odatda 50 ms dan ortiq) bloklaydigan va UI (foydalanuvchi interfeysi) ning qotib qolishiga olib kelishi mumkin bo'lgan vazifalarni ifodalaydi.
• `event`: Sichqonchani bosish yoki klavishni bosish kabi brauzer hodisasini ifodalaydi.
• `layout-shift`: Foydalanuvchi tajribasini buzishi mumkin bo'lgan sahifa maketidagi kutilmagan siljishlarni ifodalaydi (Cumulative Layout Shift).
• `largest-contentful-paint`: Ko'rish oynasidagi eng katta tarkibiy elementning ko'rinishi uchun ketgan vaqtni ifodalaydi.

Unumdorlik Metrikalarini Yig'ish

Performance Timeline API yordamida unumdorlik metrikalarini yig'ishning bir necha yo'li mavjud. Eng keng tarqalgan yondashuvlar quyidagilardan iborat:

• Yozuvlarni to'g'ridan-to'g'ri xronologiyadan olish: Muayyan unumdorlik yozuvlarini olish uchun `performance.getEntries()`, `performance.getEntriesByName()` yoki `performance.getEntriesByType()` dan foydalanish.
• Performance Observer'dan foydalanish: Yangi yozuvlar uchun xronologiyani kuzatish va ularga real vaqt rejimida javob berish.

Yozuvlarni To'g'ridan-to'g'ri Olish

Unumdorlik metrikalarini yig'ishning eng oddiy usuli - bu yozuvlarni to'g'ridan-to'g'ri xronologiyadan olishdir. Bu ma'lum bir voqea sodir bo'lgandan so'ng, masalan, sahifa yuklangandan keyin yoki foydalanuvchi ma'lum bir element bilan o'zaro aloqada bo'lgandan keyin ma'lumotlarni yig'ish uchun foydalidir.

Mana, xronologiyadan barcha resurs yozuvlarini qanday olish mumkinligiga misol:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Resurs: ${entry.name}, Davomiyligi: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Ushbu kod "resource" turidagi barcha yozuvlarni oladi va har bir resursning nomini va davomiyligini konsolga chiqaradi.

Performance Observer'dan foydalanish

Performance Observer sizga yangi unumdorlik yozuvlari uchun Performance Timeline-ni kuzatish va ularga real vaqt rejimida javob berish imkonini beradi. Bu, ayniqsa, ma'lumotlar mavjud bo'lganda ularni yig'ish uchun foydalidir, xronologiyani qayta-qayta so'rashga hojat qolmaydi.

Mana, yangi resurs yozuvlarini kuzatish uchun Performance Observer'dan qanday foydalanish mumkinligiga misol:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Resurs yuklandi: ${entry.name}, davomiyligi: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Ushbu kod "resource" turidagi yangi yozuvlarni tinglaydigan Performance Observer yaratadi. Xronologiyaga yangi resurs yozuvi qo'shilganda, kuzatuvchining qayta chaqirish funksiyasi ishga tushadi va resursning nomini va davomiyligini konsolga chiqaradi. `observer.observe()` usuli kuzatuvchi qaysi yozuv turlarini kuzatishi kerakligini belgilaydi.

Foydalanuvchi Vaqtini O'lchash

Performance Timeline API shuningdek, `mark` va `measure` yozuv turlaridan foydalanib, o'zingizning maxsus unumdorlik metrikalaringizni belgilashga imkon beradi. Bu sizning ilovangizning ma'lum qismlari, masalan, komponentni renderlash yoki foydalanuvchi kiritishini qayta ishlash uchun ketadigan vaqtni o'lchash uchun foydalidir.

Foydalanuvchi vaqtini o'lchash uchun avval siz o'lchamoqchi bo'lgan bo'limning boshlanishi va oxirini belgilash uchun `mark` yaratasiz. Keyin, ikkita belgi orasidagi davomiylikni hisoblash uchun `measure` yaratasiz.

Mana, komponentni renderlash uchun ketadigan vaqtni qanday o'lchash mumkinligiga misol:

            
performance.mark("component-render-start");

// Komponentni renderlash kodi

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Komponentni renderlash vaqti: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Ushbu kod komponentni renderlaydigan koddan oldin va keyin `component-render-start` va `component-render-end` nomli ikkita belgi yaratadi. Keyin, ikkita belgi orasidagi davomiylikni hisoblash uchun `component-render-time` nomli o'lchov yaratadi. Nihoyat, u xronologiyadan o'lchov yozuvini oladi va davomiylikni konsolga chiqaradi.

Unumdorlik Metrikalarini Tahlil Qilish

Unumdorlik metrikalarini yig'ib bo'lgach, unumdorlikdagi zaif nuqtalarni aniqlash va optimallashtirishlarni amalga oshirish uchun ularni tahlil qilishingiz kerak. Bu maqsadda siz foydalanishingiz mumkin bo'lgan bir nechta vositalar va usullar mavjud:

• Brauzer Dasturchi Vositalari: Ko'pgina zamonaviy veb-brauzerlar unumdorlik ma'lumotlarini vizualizatsiya qilish va tahlil qilish imkonini beruvchi o'rnatilgan dasturchi vositalarini taqdim etadi. Ushbu vositalar odatda unumdorlik hodisalari xronologiyasini ko'rsatuvchi "Performance" panelini, shuningdek, JavaScript kodini profillash va xotiradan foydalanishni tahlil qilish vositalarini o'z ichiga oladi.
• Unumdorlikni Kuzatish Vositalari: Unumdorlik ma'lumotlarini yig'ish, tahlil qilish va vizualizatsiya qilishda yordam beradigan ko'plab uchinchi tomon unumdorlikni kuzatish vositalari mavjud. Ushbu vositalar ko'pincha real vaqt rejimida monitoring, anomaliyalarni aniqlash va avtomatlashtirilgan hisobotlar kabi ilg'or xususiyatlarni taqdim etadi. Bularga New Relic, Datadog va Sentry misol bo'la oladi.
• Web Vitals: Google'ning Web Vitals tashabbusi foydalanuvchi tajribasini o'lchash uchun muhim hisoblangan metrikalar to'plamini taqdim etadi. Ushbu metrikalarga Largest Contentful Paint (LCP), First Input Delay (FID) va Cumulative Layout Shift (CLS) kiradi. Ushbu metriklarni kuzatish keng tarqalgan unumdorlik muammolarini aniqlash va hal qilishda yordam beradi.

Brauzer Dasturchi Vositalaridan Foydalanish

Brauzer dasturchi vositalari unumdorlikni tahlil qilish uchun kuchli va oson foydalaniladigan manbadir. Chrome Dasturchi Vositalaridagi "Performance" panelidan qanday foydalanish mumkinligi (boshqa brauzerlarda ham shunga o'xshash funksiyalar mavjud):

1. Dasturchi Vositalarini Ochish: Veb-sahifada sichqonchaning o'ng tugmasini bosing va "Inspect" ni tanlang yoki F12 tugmasini bosing.
2. "Performance" Paneliga O'tish: "Performance" yorlig'ini bosing.
3. Yozib Olishni Boshlash: Unumdorlik ma'lumotlarini yozib olishni boshlash uchun yozib olish tugmasini (odatda doira shaklida) bosing.
4. Sahifa Bilan Ishlash: Tahlil qilmoqchi bo'lgan harakatlarni bajaring, masalan, sahifani yuklash, tugmalarni bosish yoki varaqlash.
5. Yozib Olishni To'xtatish: Yozib olishni tugatish uchun to'xtatish tugmasini bosing.
6. Xronologiyani Tahlil Qilish: "Performance" paneli yuklanish vaqtlari, JavaScript bajarilishi, renderlash va chizish kabi unumdorlik hodisalari xronologiyasini ko'rsatadi.

Xronologiya har bir hodisa haqida batafsil ma'lumot beradi, jumladan uning davomiyligi, boshlanish vaqti va boshqa hodisalar bilan aloqasi. Siz kattalashtirishingiz va kichiklashtirishingiz, hodisalarni turiga ko'ra filtrlashingiz va qo'shimcha ma'lumot olish uchun alohida hodisalarni tekshirishingiz mumkin. "Bottom-Up," "Call Tree," va "Event Log" yorliqlari ma'lumotlarga turli nuqtai nazarlardan qarash imkonini beradi, bu esa unumdorlikdagi zaif nuqtalarni aniqlash va kodingizni optimallashtirishga yordam beradi.

Web Vitals: Foydalanuvchi Tajribasini O'lchash

Web Vitals - bu Google tomonidan veb-saytdagi foydalanuvchi tajribasini o'lchash uchun belgilangan metrikalar to'plamidir. Ushbu metriklarga e'tibor qaratish foydalanuvchilarning qoniqishini va SEO reytingini sezilarli darajada yaxshilashi mumkin.

• Largest Contentful Paint (LCP): Ko'rish oynasidagi eng katta tarkibiy elementning ko'rinishi uchun ketgan vaqtni o'lchaydi. Yaxshi LCP ko'rsatkichi 2,5 soniya yoki undan kam.
• First Input Delay (FID): Brauzerning birinchi foydalanuvchi harakatiga (masalan, tugmani bosish yoki havolaga tegish) javob berishi uchun ketgan vaqtni o'lchaydi. Yaxshi FID ko'rsatkichi 100 millisekund yoki undan kam.
• Cumulative Layout Shift (CLS): Sahifada sodir bo'ladigan kutilmagan maket siljishlari miqdorini o'lchaydi. Yaxshi CLS ko'rsatkichi 0,1 yoki undan kam.

Siz Web Vitals'ni turli vositalar yordamida o'lchashingiz mumkin, jumladan:

• Chrome User Experience Report (CrUX): Anonimlashtirilgan Chrome foydalanuvchi ma'lumotlariga asoslangan veb-saytlar uchun real dunyo unumdorlik ma'lumotlarini taqdim etadi.
• Lighthouse: Veb-sahifalarning unumdorligi, qulayligi va SEO'sini audit qiladigan avtomatlashtirilgan vosita.
• Web Vitals Extension: Veb-saytlarni ko'rib chiqayotganingizda Web Vitals metrikalarini real vaqt rejimida ko'rsatadigan Chrome kengaytmasi.
• PerformanceObserver API: Hodisalar sodir bo'lganda to'g'ridan-to'g'ri brauzerdan veb vitals ma'lumotlarini yig'ish.

Amaliy Misollar va Qo'llash Holatlari

Veb-saytingiz unumdorligini optimallashtirish uchun Performance Timeline API'dan qanday foydalanishingiz mumkinligiga oid ba'zi amaliy misollar va qo'llash holatlari:

• Sekin Yuklanayotgan Resurslarni Aniqlash: Yuklanishi uzoq vaqt olayotgan rasmlar, skriptlar va uslublar jadvallarini aniqlash uchun `resource` yozuv turidan foydalaning. Ushbu resurslarni siqish, Kontent Yetkazib Berish Tarmog'idan (CDN) foydalanish yoki ularni kechiktirib yuklash (lazy-loading) orqali optimallashtiring. Masalan, Shopify, Magento yoki WooCommerce kabi ko'plab elektron tijorat platformalari mahsulotlarni sotish uchun rasmlarga tayanadi. Performance Timeline ma'lumotlaridan foydalanib rasm yuklanishini optimallashtirish, ayniqsa mobil foydalanuvchilar uchun mijozlar tajribasini yaxshilaydi.
• JavaScript Bajarilish Vaqtini O'lchash: Muayyan JavaScript funksiyalarining bajarilishi uchun ketadigan vaqtni o'lchash uchun `mark` va `measure` yozuv turlaridan foydalaning. Sekin ishlaydigan funksiyalarni aniqlang va ularni samaraliroq algoritmlardan foydalanish, natijalarni keshlash yoki bajarilishni keyinroqqa qoldirish orqali optimallashtiring.
• Uzoq Vazifalarni Aniqlash: Asosiy oqimni uzoq vaqt davomida bloklaydigan vazifalarni aniqlash uchun `longtask` yozuv turidan foydalaning. UI ning qotib qolishini oldini olish uchun ushbu vazifalarni kichikroq qismlarga bo'ling yoki ularni fon oqimiga o'tkazing.
• First Contentful Paint (FCP) va Largest Contentful Paint (LCP) ni Kuzatish: Birinchi tarkib va eng katta tarkibning ekranda paydo bo'lishi uchun ketgan vaqtni kuzatish uchun `paint` va `largest-contentful-paint` yozuv turlaridan foydalaning. Ushbu metriklarni yaxshilash uchun kritik renderlash yo'lini optimallashtiring.
• Cumulative Layout Shift (CLS) ni Tahlil Qilish: Kutilmagan maket siljishlariga sabab bo'layotgan elementlarni aniqlash uchun `layout-shift` yozuv turidan foydalaning. Ushbu elementlar uchun joy ajrating yoki ularni maket siljishlariga olib kelmasdan animatsiya qilish uchun `transform` xususiyatidan foydalaning.

Ilg'or Usullar

Performance Timeline API asoslarini yaxshi tushunib olganingizdan so'ng, veb-saytingiz unumdorligini yanada optimallashtirish uchun ba'zi ilg'or usullarni o'rganishingiz mumkin:

• Haqiqiy Foydalanuvchi Monitoringi (RUM): Veb-saytingiz unumdorligining aniqroq tasvirini olish uchun haqiqiy foydalanuvchilardan unumdorlik ma'lumotlarini to'plang. RUM vositasidan foydalaning yoki Performance Timeline API yordamida o'zingizning maxsus RUM yechimingizni amalga oshiring. Ushbu ma'lumotlar keyinchalik mintaqaviy unumdorlik farqlarini aniqlash uchun ishlatilishi mumkin. Masalan, AQShda joylashgan veb-sayt tarmoq kechikishi tufayli Osiyoda sekinroq yuklanishi mumkin.
• Sintetik Monitoring: Foydalanuvchi harakatlarini simulyatsiya qilish va nazorat ostidagi muhitda unumdorlikni o'lchash uchun sintetik monitoringdan foydalaning. Bu sizga haqiqiy foydalanuvchilarga ta'sir qilishidan oldin unumdorlik muammolarini aniqlashga yordam beradi.
• Avtomatlashtirilgan Unumdorlik Testi: Unumdorlik regressiyalarini avtomatik ravishda aniqlash uchun unumdorlik testini uzluksiz integratsiya/uzluksiz joylashtirish (CI/CD) quvuringizga integratsiya qiling. Lighthouse CI kabi vositalar bu jarayonni avtomatlashtirish uchun ishlatilishi mumkin.
• Unumdorlik Byudjeti: Sahifani yuklash vaqti, resurs hajmi va JavaScript bajarilish vaqti kabi asosiy metrikalar uchun unumdorlik byudjetlarini belgilang. Ushbu byudjetlarni kuzatish va ular oshib ketganda sizni ogohlantirish uchun avtomatlashtirilgan vositalardan foydalaning.

Brauzerlararo Moslik

Performance Timeline API zamonaviy veb-brauzerlar, jumladan Chrome, Firefox, Safari va Edge tomonidan keng qo'llab-quvvatlanadi. Biroq, turli brauzerlarda API'ning amalga oshirilishi va xatti-harakatlarida ba'zi farqlar bo'lishi mumkin.

Brauzerlararo moslikni ta'minlash uchun kodingizni turli brauzerlarda sinab ko'rish va API qo'llab-quvvatlanmasa, funksionallikni yaxshi holatda pasaytirish uchun xususiyatlarni aniqlash (feature detection) dan foydalanish muhimdir. `modernizr` kabi kutubxonalar xususiyatlarni aniqlashda yordam berishi mumkin.

Eng Yaxshi Amaliyotlar

Performance Timeline API dan foydalanish uchun ba'zi eng yaxshi amaliyotlar:

• Real vaqt rejimida monitoring uchun Performance Observer'lardan foydalaning: Performance Observer'lar xronologiyani qayta-qayta so'rashdan ko'ra, unumdorlik ma'lumotlarini yig'ishning samaraliroq usulini taqdim etadi.
• Unumdorlik ma'lumotlarini yig'ishning unumdorlikka ta'sirini yodda tuting: Juda ko'p ma'lumot yig'ish veb-saytingiz unumdorligiga salbiy ta'sir ko'rsatishi mumkin. Faqat kerakli ma'lumotlarni yig'ing va Performance Observer qayta chaqirish funksiyasida qimmat operatsiyalarni bajarishdan saqlaning.
• Belgilar va o'lchovlar uchun mazmunli nomlardan foydalaning: Bu ma'lumotlarni tahlil qilishni va unumdorlikdagi zaif nuqtalarni aniqlashni osonlashtiradi.
• Kodingizni turli brauzerlarda sinab ko'ring: Kodingizni turli brauzerlarda sinab ko'rish va xususiyatlarni aniqlashdan foydalanish orqali brauzerlararo moslikni ta'minlang.
• Boshqa optimallashtirish usullari bilan birlashtiring: Performance Timeline API muammolarni o'lchash va aniqlashga yordam beradi. Uni yaxlit unumdorlikni yaxshilash uchun o'rnatilgan veb-optimallashtirishning eng yaxshi amaliyotlari (rasmlarni optimallashtirish, minifikatsiya, CDN dan foydalanish) bilan birgalikda ishlating.

Xulosa

Performance Timeline API veb-sayt unumdorligini o'lchash va tahlil qilish uchun kuchli vositadir. API ning asosiy tushunchalari va interfeyslarini tushunib, siz qimmatli unumdorlik metrikalarini yig'ishingiz va ulardan unumdorlikdagi zaif nuqtalarni aniqlash va optimallashtirishlarni amalga oshirish uchun foydalanishingiz mumkin. Web Vitals'ga e'tibor qaratib va RUM va avtomatlashtirilgan unumdorlik testi kabi ilg'or usullarni amalga oshirib, siz tezroq, silliqroq va yoqimliroq foydalanuvchi tajribasini taqdim eta olasiz. Performance Timeline API ni o'zlashtirish va unumdorlik tahlilini dasturlash ish jarayoningizga integratsiya qilish bugungi unumdorlikka asoslangan veb-muhitda veb-saytingiz unumdorligi va foydalanuvchilarning qoniqishida sezilarli yaxshilanishlarga olib keladi.